//获取默认视频页合集中元素的列表
const getDefVideoPageCollectionElList = async () => {
    return new Promise(resolve => {
        const i1 = setInterval(() => {
            const elList = document.querySelectorAll(".video-pod__body>.video-pod__list.section>div");
            if (elList.length === 0) return;
            clearInterval(i1);
            const tempList = [];
            for (let el of elList) {
                tempList.push({
                    title: el.querySelector(".title").title.trim(),
                    clickEl: el.querySelector(".single-p>.simple-base-item")
                })
            }
            resolve(tempList)
        }, 500);
    });
}

//获取默认视频页中视频选集列表
const getDefVideoPageAnthologyElList = async () => {
    return new Promise(resolve => {
        const i1 = setInterval(() => {
            const elList = document.querySelectorAll(".video-pod__body>.video-pod__list.multip.list>div");
            if (elList.length === 0) return;
            clearInterval(i1);
            const tempList = [];
            for (let el of elList) {
                tempList.push({
                    title: el.querySelector(".title").title.trim(),
                    clickEl: el
                })
            }
            resolve(tempList);
        }, 500);
    })
}

//异步检测视频页右侧合集列表是否是视频选集列表
const isDefVideoPageAnthology = (maxIndex = 3) => {
    return new Promise((resolve, reject) => {
        let index = 1;
        const i1 = setInterval(() => {
            if (document.querySelector(".header-top .view-mode") === null) {
                if (index === maxIndex) {
                    clearInterval(i1);
                    reject();
                }
                index++;
                return;
            }
            clearInterval(i1);
            resolve();
        }, 1000);
    })
}


//获取稍后再看视频页合集中元素的列表
const getCheckBackLaterVideoPageCollectionElList = async () => {
    return new Promise(resolve => {
        const i1 = setInterval(() => {
            const elList = document.querySelectorAll("#playlist-video-action-list>.action-list-inner>div");
            if (elList.length === 0) return;
            clearInterval(i1);
            const tempList = [];
            for (let el of elList) {
                tempList.push({
                    title: el.querySelector(".title").title.trim(),
                    clickEl: el.querySelector(".main")
                })
            }
            resolve(tempList)
        }, 500);
    });
}

new Vue({
    el: "#video_page_settings_app_search",
    template: `
      <div>
        <div>
          <input type="text" placeholder="搜索列表视频" v-model="inputValue" style="width: 80%">
          <button gz_type="info" @click="refreshListBut">刷新</button>
        </div>
        <div>
          <div v-for="item in searchShowList">
            <span>{{ item.title }}</span>
            <button gz_type @click="playVideo(item)">播放</button>
          </div>
        </div>
      </div>`,
    data() {
        return {
            inputValue: '',
            videoPageCollectionElList: [],
            searchShowList: []
        }
    },
    methods: {
        playVideo(item) {
            item.clickEl.click();
        },
        setSearchShowListAndVideoPageCollectionElList(dataList) {
            this.searchShowList.splice(0, this.searchShowList.length);
            this.videoPageCollectionElList.splice(0, this.videoPageCollectionElList.length);
            this.searchShowList.push(...dataList);
            this.videoPageCollectionElList.push(...dataList);
        },
        loadCollectionList() {
            return new Promise(resolve => {
                if (global_BiliBIli_video_page_settings_dataVue["isCheckBackLaterPlayVideoPage"]) {
                    getCheckBackLaterVideoPageCollectionElList().then(list => {
                        this.setSearchShowListAndVideoPageCollectionElList(list);
                        Qmsg.success("已获取到稍后再看视频页合集列表", {position: "bottomright"});
                        resolve();
                    });
                } else {
                    isDefVideoPageAnthology().then(async () => {
                        const newVar = await getDefVideoPageAnthologyElList();
                        this.setSearchShowListAndVideoPageCollectionElList(newVar);
                        Qmsg.success("已获取到视频选集列表", {position: "bottomright"});
                        resolve();
                    }).catch(() => {
                        getDefVideoPageCollectionElList().then(list => {
                            Qmsg.success("已获取到视频合集列表", {position: "bottomright"});
                            this.setSearchShowListAndVideoPageCollectionElList(list);
                            resolve();
                        })
                    });
                }
            });
        },
        refreshListBut() {
            const loading = Qmsg.loading("数据刷新中");
            this.loadCollectionList().finally(loading.close())
        }
    },
    watch: {
        inputValue(newValue) {
            this.searchShowList.splice(0, this.searchShowList.length);
            for (let data of this.videoPageCollectionElList) {
                if (data.title.includes(newValue.trim())) {
                    this.searchShowList.push(data);
                }
            }

        }
    },
    created() {
        this.loadCollectionList();
    }
});
